<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      class="mt-dialog"
      @close="close"
    >
      <el-form :model="temp" label-position="left" label-width="160px">
        <el-form-item label="网站ID">
          <el-input v-model="temp.website_id" disabled />
        </el-form-item>
        <el-form-item label="源服务器IP">
          <el-input v-model="temp.source_server_ip" />
        </el-form-item>
        <el-form-item label="目标服务器IP">
          <el-autocomplete
            v-model="temp.target_server_ip"
            style="width: 100%"
            :fetch-suggestions="querySearchServer"
            placeholder="请输入ip查询"
          />
        </el-form-item>
        <el-form-item label="cloudflare账号">
          <el-select
            v-model="temp.cloudflareconfig_id"
            placeholder="选择账号"
            style="width: 100%"
            filterable
            remote
            reserve-keyword
            :loading="pagelading"
            :remote-method="SearchCloudFlare"
          >
            <el-option v-for="item in cfconfigs" :key="item.id" :label="item.email" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="数据库备份">
          <el-select
            v-model="temp.mysqlbackup_id"
            placeholder="选择账号"
            style="width: 100%"
            filterable
            clearable
            :loading="listLoading"
          >
            <el-option
              v-for="item in mysqlbackups"
              :key="item.id"
              :label="item.website_id + &quot;|&quot; + item.note + &quot;|&quot; + item.mysql_backup_at"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="网站程序备份">
          <el-select
            v-model="temp.websitebackups_id"
            placeholder="选择账号"
            style="width: 100%"
            filterable
            clearable
            :loading="listLoading"
          >
            <el-option
              v-for="item in websitebacups"
              :key="item.id"
              :label="item.website_id + &quot;|&quot; + item.note + &quot;|&quot; + item.webfile_backup_at"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="temp.target_server_ip !== ''" type="primary" @click="handleCreate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Get as GetWebsite } from '@/api/erp/elicink/website'
import { Get as GetServers } from '@/api/orders/serverstatus'
import { Post, Delete, Put } from '@/api/orders/websitechangeservertask'
import { Get as GetCFConfig } from '@/api/prestashop/cloudflareconfig'
import { Get as GetWebsitebackups } from '@/api/orders/websitebackups'
import { Get as GetMySqlBackup } from '@/api/orders/mysqlbackup'
import qs from 'qs'

export default {
  name: 'WebsiteChangeServer',
  props: ['operate_website_id', 'source_server_ip', 'isVisible'],
  data() {
    return {
      listLoading: false,
      websitebacups: [],
      mysqlbackups: [],
      dialogTitle: '',
      dialogVisible: false,
      UploadTask: {},
      website: {},
      pagelading: false,
      cfconfigs: [],
      temp: {
        website_id: this.operate_website_id,
        source_server_ip: this.source_server_ip,
        cloudflareconfig_id: '',
        target_server_ip: '',
        mysqlbackup_id: '',
        websitebackups_id: ''
      }
    }
  },
  watch: {
    isVisible(v) {
      this.dialogVisible = v
      this.temp.source_server_ip = this.source_server_ip
      this.temp.mysqlbackup_id = ''
      this.temp.websitebackups_id = ''
      this.temp.cloudflareconfig_id = ''
      this.handleGetWebsite()
      this.handleGetWebsiteBackups()
      this.handlegetMySqlbackups()
      this.GetCloudConfigs()
    },
    source_server_ip(v) {
      this.temp.source_server_ip = v
    }
  },
  methods: {
    handlegetMySqlbackups() {
      this.listLoading = true
      GetMySqlBackup(null, qs.stringify({
        website_id: this.operate_website_id
      }))
        .then(response => {
          this.mysqlbackups = response.data.data
          this.listLoading = false
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    handleGetWebsiteBackups() {
      this.listLoading = true
      GetWebsitebackups(null, qs.stringify({
        website_id: this.operate_website_id,
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc
      }))
        .then(response => {
          this.websitebacups = response.data.data
          this.listLoading = false
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    GetCloudConfigs() {
      GetCFConfig(null, qs.stringify({
        kw: '',
        pagesize: 100,
        order_by: this.order_by,
        order_desc: this.order_desc
      }))
        .then(response => {
          this.cfconfigs = response.data.data
        }).catch(err => {
          console.log(err)
        })
    },
    SearchCloudFlare(query) {
      if (query !== '') {
        this.temp.cloudflareconfig_id = ''
        this.cfconfigs = []
        this.query = query
        this.GetCloudConfigs()
      }
    },
    querySearchServer(v, cb) {
      if (v === undefined) {
        return
      }
      if (v === '') {
        return
      }
      if (v.length < 3) {
        return
      }
      GetServers(null, qs.stringify({
        kw: v,
        pagesize: 10
      })).then(response => {
        const results = []
        for (let i = 0; i < response.data.data.length; i++) {
          results.push({ 'value': response.data.data[i]['gsapi_ip'] })
        }
        cb(results)
      }).catch(err => {
        console.log(err)
        this.listLoading = false
      })
    },
    handleGetWebsite() {
      GetWebsite(this.operate_website_id, qs.stringify({
        pagesize: 1,
        page: 1
      })).then(response => {
        this.website = response.data
        this.temp.website_id = this.operate_website_id
        this.temp.cloudflareconfig_id = this.website.cloudflareconfig_id
        this.dialogTitle = this.website.domain + '一键迁移 ID:' + this.operate_website_id
      })
    },
    handleCreate() {
      if (this.temp.source_server_ip === '') {
        this.warning('源服务器ip不能为空')
        return
      }
      if (this.temp.target_server_ip === '') {
        this.warning('目标服务器ip不能为空')
        return
      }
      if (this.temp.cloudflareconfig_id === '') {
        this.warning('cloudflare不能为空')
        return
      }
      Post(this.temp).then((response) => {
        this.$emit('reload')
        this.notify('添加成功')
      })
    },
    confirm(action) {
      const _data = this.temp
      switch (action) {
        case 'create':
          Post(this.temp).then((response) => {
            this.dialogVisible = false
            this.$emit('reload')
            this.notify('添加成功')
          })
          break
        case 'delete':
          Delete(_data.id).then((response) => {
            this.dialogVisible = false
            this.$emit('reload')
            this.notify('删除成功')
          })
          break
        case 'edit':
          Put(_data.id, _data).then((response) => {
            this.dialogVisible = false
            this.$emit('reload')
            this.notify('更新成功')
          })
          break
      }
    },
    close() {
      this.$emit('close', false)
    },
    warning(message) {
      this.$notify({
        title: '错误提醒',
        message: message,
        type: 'warning',
        duration: 2000
      })
    },
    notify(message) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: 2000
      })
    }
  }
}
</script>

<style scoped>
.mt-dialog >>> span.el-dialog__title {
  word-break: normal;
  width: auto;
  display: block;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
}
</style>
